<template>
    <!-- 防伪系统 -->
    <div class="boxs margin_top">
        <headers :pageindex="5"></headers>
        <div class="img"></div>
        <div :class="!ismobile ? 'pcfloat width1300 pc' : 'mobile'">
            <div>
                <div class="title">公司介绍</div>
                <div class="content" :class="!ismobile ? 'ispc ' : 'ismobiles'">
                    <div>
                        东莞邀星科技有限公司主要从事一物一码技术研发及平台应用服务，致力于通过为每一件产品赋予二维码标识，打通品牌与每一位既有消费者之间的沟通场景。帮助企业持续获得继品牌之后的又一重要资产——企业精准大数据，打造“以用户为中心”的生态圈。
                    </div>
                    <div>
                        东莞邀星科技有限公司将移动信息技术和企业实际场景结合，不断创新，为企业提供包 括产品促销、市场营销、防伪溯源、防窜管控、质量追溯、客户关系管理、移动商城体系在内的整合解决方案。
                    </div>
                    <div>
                        东莞邀星科技有限公司拥有10年一物一码技术开发经验，服务行业包括：快消食品、酒水行业、茶叶行业、家电行业、母婴行业、美妆行业、3C数码、农牧行业、保健品行业、日用品行业等。
                    </div>
                </div>
            </div>
            <div>
                <div class="title">联系我们</div>
                <div class="erweima">
                    <img src="../assets/images/wx20231124-212821-360.jpg" alt="">
                    <div class="bigt">邀星工作室</div>
                    <div class="t1">
                        <p class="">微信扫一扫</p>
                        <p class="">或长按识别二维码</p>
                    </div>
                    <div class="t2">
                        <p>+86 151 1226 7883（肖经理）</p>
                        <p>+86 176 6613 8291（肖经理）</p>
                        <p>15112267883@163.com</p>
                    </div>
                </div>
            </div>
        </div>
        <bottoms></bottoms>
    </div>
</template>

<script>


import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import { WOW } from "wowjs";
import bottoms from "./modle/bottoms.vue"
import headers from "./modle/headers.vue"

export default {
    name: 'HelloWorld',
    components: {
        headers,
        bottoms,
    },
    data() {
        return {
            ismobile: false
        }
    },
    mounted() {
        this.ismobile = this.isMobile()
        let that = this;
        window.addEventListener('resize', function () {
            that.ismobile = that.isMobile()
        });

        //第一种写法，可以设置wow中属性
        this.$nextTick(() => {
            // 在dom渲染完后,再执行动画
            var wow = new WOW({
                boxClass: "wow", ///动画元件css类（默认为wow）
                animateClass: "animated", //动画css类（默认为animated）
                offset: 50, //到元素距离触发动画（当默认为0）
                mobile: true, //在移动设备上触发动画（默认为true）
                live: true, //对异步加载的内容进行操作（默认为true）
            });
            wow.init();
        });

        // 顶部轮播图
        new Swiper('.swiper-container', {
            loop: true,
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                dynamicBullets: true,
                dynamicMainBullets: 2,
                clickable: true,
            },
        })
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.bigt {
    font-size: 1rem;
    text-align: center;
}

.t1 {
    font-size: 1.2rem;
    text-align: center;
    margin-top: 1rem;

    >p {
        margin: 0;
    }
}

.t2 {
    margin-top: 1rem;
    font-size: 1.1rem;
    text-align: center;

    >p {
        margin: 0;
        margin-top: 0.2rem;
    }
}

.pcfloat {
    display: block;
    padding: 2rem 0;

    >div {
        width: 61%;
        float: left;
        padding-right: 2rem;

    }

    >div:nth-child(2) {
        width: 38%;
        padding-right: 0rem;
        float: right;
    }
}

.erweima {
    width: 80%;
    margin: 0 auto;
    margin-top: 2rem;
    padding-top: 3rem;
    box-shadow: 4px 5px 17px -1px rgba(0, 0, 0, 0.09);
    padding-bottom: 2rem;
    margin-bottom: 3rem;

    img {
        display: block;
        margin: 0 auto;
        margin-top: 1rem;
        width: 80%;
    }
}

.content {
    padding: 20px;

    >div {
        text-indent: 5.5rem;
        font-size: 1.3rem;
        line-height: 1.8rem;
        margin-top: 1rem;
        color: #404040;
    }

}

.img {
    background: yellow;
}

.title {
    font-size: 2rem;
    margin-top: 2rem;
    text-align: center;
    color: #808080;
}

.ismobiles {
    padding: 1rem 2rem;

}

.ispc {
    min-width: auto !important;

    div {
        font-size: 1.2rem !important;
        line-height: 2rem;
    }

}

.pc {
    .title {
        margin-top: 50px;

        font-size: 2rem !important;
    }

    .content {
        padding: 20px;

        >div {
            text-indent: 3rem !important;
        }
    }
}


.mobile {
    .title {
        font-size: 1.4rem !important;
        font-weight: bold;

    }

    .content>div {
        font-size: 1rem !important;
        margin-top: 0rem !important;
        text-indent: 2rem;
    }

    .bigt {
        font-size: 1.3rem;
    }

    .erweima {
        padding-top: 0.6rem;
    }

    .t1 {
        font-size: 1rem;
        text-align: center;
        margin-top: 1rem;

        >p {
            margin: 0;
        }
    }

    .t2 {
        margin-top: 1rem;
        font-size: 1rem;
        text-align: center;

        >p {
            margin: 0;
            margin-top: 0.2rem;
        }
    }
}

.width1300 {
    width: 1200px !important;
}

.pc {
    .erweima {}
}

@media (max-width: 3300px) {}

@media (max-width: 1120px) {}

@media (max-width: 1000px) {}

.boxs {
    width: 100%;
    // max-width: 1300px;
    // margin: 0 auto;
    // overflow: hidden;
}

@media (max-width: 3300px) {
    .margin_top {
        margin-top: 110px;
    }

}

@media (max-width: 1120px) {}

@media (max-width: 1000px) {
    .margin_top {
        margin-top: 0px;
    }
}
</style>
